
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>hexo搭建教程 | Binging</title>
    <meta name="author" content="HiW" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="icon" href="/images/avatar3.jpg" />
    <link rel="preconnect" href="https://cdn.staticfile.org" />
<script src="https://cdn.staticfile.org/vue/3.3.7/vue.global.prod.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.2/css/all.min.css" />
<link rel="preconnect" href="https://fonts.loli.net" />
<link rel="preconnect" href="https://gstatic.loli.net" crossorigin />
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Fira+Code:wght@400;500;600;700&family=Lexend:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap" />
<script> const mixins = {}; </script>

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>


<script src="https://cdn.staticfile.org/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdn.staticfile.org/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<link
    rel="stylesheet"
    href="https://cdn.staticfile.org/highlight.js/11.9.0/styles/github.min.css"
/>
<script src="/js/lib/highlight.js"></script>



<script src="/js/lib/preview.js"></script>









<link rel="stylesheet" href="/css/main.css" />

<meta name="generator" content="Hexo 6.3.0"></head>
<body>
    <div id="layout">
        <transition name="fade">
            <div id="loading" v-show="loading">
                <div id="loading-circle">
                    <h2>LOADING</h2>
                    <p>加载过慢请开启缓存 浏览器默认开启</p>
                    <img src="/images/loading.gif" />
                </div>
            </div>
        </transition>
        <div id="menu" :class="{ hidden: hiddenMenu, 'menu-color': menuColor}">
    <nav id="desktop-menu">
        <a class="title" href="/">
            <span>BINGING</span>
        </a>
        
        <a href="/">
            <i class="fa-solid fa-house fa-fw"></i>
            <span>&ensp;Home</span>
        </a>
        
        <a href="/about">
            <i class="fa-solid fa-id-card fa-fw"></i>
            <span>&ensp;About</span>
        </a>
        
        <a href="/archives">
            <i class="fa-solid fa-box-archive fa-fw"></i>
            <span>&ensp;文档搜索</span>
        </a>
        
        <a href="/categories/hexo/">
            <i class="fa-solid fa-bookmark fa-fw"></i>
            <span>&ensp;Categories</span>
        </a>
        
        <a href="/tags/hexo/">
            <i class="fa-solid fa-tags fa-fw"></i>
            <span>&ensp;Tags</span>
        </a>
        
        <a target="_blank" rel="noopener" href="https://cn.bing.com/?mkt=zh-cn">
            <i class="fa-solid fa-fa-solid fa-archway fa-fw"></i>
            <span>&ensp;必应</span>
        </a>
        
    </nav>
    <nav id="mobile-menu">
        <div class="title" @click="showMenuItems = !showMenuItems">
            <i class="fa-solid fa-bars fa-fw"></i>
            <span>&emsp;BINGING</span>
        </div>
        <transition name="slide">
            <div class="items" v-show="showMenuItems">
                
                <a href="/">
                    <div class="item">
                        <div style="min-width: 20px; max-width: 50px; width: 10%">
                            <i class="fa-solid fa-house fa-fw"></i>
                        </div>
                        <div style="min-width: 100px; max-width: 150%; width: 20%">Home</div>
                    </div>
                </a>
                
                <a href="/about">
                    <div class="item">
                        <div style="min-width: 20px; max-width: 50px; width: 10%">
                            <i class="fa-solid fa-id-card fa-fw"></i>
                        </div>
                        <div style="min-width: 100px; max-width: 150%; width: 20%">About</div>
                    </div>
                </a>
                
                <a href="/archives">
                    <div class="item">
                        <div style="min-width: 20px; max-width: 50px; width: 10%">
                            <i class="fa-solid fa-box-archive fa-fw"></i>
                        </div>
                        <div style="min-width: 100px; max-width: 150%; width: 20%">文档搜索</div>
                    </div>
                </a>
                
                <a href="/categories/hexo/">
                    <div class="item">
                        <div style="min-width: 20px; max-width: 50px; width: 10%">
                            <i class="fa-solid fa-bookmark fa-fw"></i>
                        </div>
                        <div style="min-width: 100px; max-width: 150%; width: 20%">Categories</div>
                    </div>
                </a>
                
                <a href="/tags/hexo/">
                    <div class="item">
                        <div style="min-width: 20px; max-width: 50px; width: 10%">
                            <i class="fa-solid fa-tags fa-fw"></i>
                        </div>
                        <div style="min-width: 100px; max-width: 150%; width: 20%">Tags</div>
                    </div>
                </a>
                
                <a target="_blank" rel="noopener" href="https://cn.bing.com/?mkt=zh-cn">
                    <div class="item">
                        <div style="min-width: 20px; max-width: 50px; width: 10%">
                            <i class="fa-solid fa-fa-solid fa-archway fa-fw"></i>
                        </div>
                        <div style="min-width: 100px; max-width: 150%; width: 20%">必应</div>
                    </div>
                </a>
                
            </div>
        </transition>
    </nav>
</div>
<transition name="fade">
    <div id="menu-curtain" @click="showMenuItems = !showMenuItems" v-show="showMenuItems"></div>
</transition>

        <div id="main" :class="loading ? 'into-enter-from': 'into-enter-active'">
            <div class="article">
    <div>
        <h1>hexo搭建教程</h1>
    </div>
    <div class="info">
        <span class="date">
            <span class="icon">
                <i class="fa-solid fa-calendar fa-fw"></i>
            </span>
            2023/11/7
        </span>
        
        <span class="category">
            <a href="/categories/hexo/">
                <span class="icon">
                    <i class="fa-solid fa-bookmark fa-fw"></i>
                </span>
                hexo
            </a>
        </span>
        
        
        <span class="tags">
            <span class="icon">
                <i class="fa-solid fa-tags fa-fw"></i>
            </span>
            
            
            <span class="tag">
                
                <a href="/tags/hexo/" style="color: #00a596">hexo</a>
            </span>
            
        </span>
        
    </div>
    
    <div class="content" v-pre>
        <h2 id="搭建使用hexo静态博客"><a href="#搭建使用hexo静态博客" class="headerlink" title="搭建使用hexo静态博客"></a>搭建使用hexo静态博客</h2><p>静态网站相较于动态网站更加安全，响应速度更快<br>（应该是吧，不是的话当我在放屁）<br>最重要的是github允许使用静态网站<br>这不就是直接白嫖一台服务器了<br>然后我们可以使用hexo白嫖github<br>下面教程教大家如何配置hexo</p>
<span id="more"></span>
<p>教程<br>1 配置环境<br>2 hexo安装  （如果已经建过网站的可以跳过这个）<br>3 hexo运行<br>4 hexo目录介绍<br>5 如何开发</p>
<h1 id="配置环境"><a href="#配置环境" class="headerlink" title="配置环境"></a>配置环境</h1><p>（以上只适用于window，其他系统请参考官网文档）<br>首先我们来安装git<br><a target="_blank" rel="noopener" href="https://git-scm.com/download/win">git官网下载</a></p>
<p>然后我们来安装Node.js的框架<br><a target="_blank" rel="noopener" href="https://nodejs.org/zh-cn/download">官网下载</a><br>如果打开不了可以用淘宝镜像<br><a target="_blank" rel="noopener" href="https://registry.npmmirror.com/binary.html?path=node/">淘宝镜像</a><br>实在不行用我的链接（不保证是最新版本）<br><a target="_blank" rel="noopener" href="https://wwwe.lanzouq.com/iAJHF1e1tvyb">蓝奏云</a><br>密码:aiza</p>
<p>安装完成环境之后<br>我们win＋r按键<br>打开cmd<br>输入下面的命令<br><code>$ npm install -g hexo-cli</code></p>
<p>之后就完成了环境的安装了</p>
<h1 id="hexo安装"><a href="#hexo安装" class="headerlink" title="hexo安装"></a>hexo安装</h1><p>首先我们可以用</p>
<p>命令行<br><code>cd XXX</code><br>来修改路径，XXX填路径<br>切换路径之后<br>命令行<br><code>hexo init &lt;folder&gt;</code></p>
<p>hexo会生成网站的源码<br><code>&lt;folder&gt;</code>是网站的文件夹名称</p>
<h1 id="4-运行"><a href="#4-运行" class="headerlink" title="4 运行"></a>4 运行</h1><p>我们可以用<br><code>hexo generate</code>来编译生成网站代码<br>简写<code>hexo g</code><br>有代码后我们可以用（其实直接 hexo s也就能同时编译和启动服务器）<br><code>hexo server</code>来启动服务器<br>简写<code>hexo s</code><br>如果要修改端口XXX为端口<br><code>hexo server -p XXX</code><br>简写<code>hexo s -p XXX</code><br>自定义ip<br><code>hexo server -i 192.168.1.1</code><br>简写<code>hexo s -i 192.168.1.1</code></p>
<h1 id="hexo目录介绍"><a href="#hexo目录介绍" class="headerlink" title="hexo目录介绍"></a>hexo目录介绍</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">├── _config.yml</span><br><span class="line">├── package.json</span><br><span class="line">├── scaffolds</span><br><span class="line">├── public</span><br><span class="line">├── source</span><br><span class="line">|   ├── _drafts</span><br><span class="line">|   └── _posts</span><br><span class="line">└── themes</span><br></pre></td></tr></table></figure>
<p>_config.yml是站点配置</p>
<p>package.json<br>应用程序的信息。EJS, Stylus 和 Markdown 渲染引擎 已默认安装，您可以自由移除。</p>
<p>scaffolds<br>是hexo本体文件</p>
<p>public是hexo编译出来的网站代码</p>
<p>source是写文章<br>其中里面的_posts是文章的地方<br>你也可以新建tags（标签），about（网站介绍）<br>categories（分类），img（网站文件）等等</p>
<p>themes是放主题的地方</p>
<h1 id="5-如何开发"><a href="#5-如何开发" class="headerlink" title="5 如何开发"></a>5 如何开发</h1><p>_config.yml是站点配置</p>
<p>关于配置<br>参数	描述<br>title	网站标题<br>subtitle	网站副标题<br>description	网站描述<br>keywords	网站的关键词。支持多个关键词。<br>author	您的名字<br>language	网站使用的语言。<br>对于简体中文用户来说常见的有 zh-Hans和 zh-CN。<br>timezone	<br>网站时区。Hexo 默认使用您电脑的时区。<br>请参考 时区列表 进行设置，<br>如 America&#x2F;New_York, Japan, 和 UTC 。<br>一般的，对于中国大陆地区可以使用 Asia&#x2F;Shanghai。<br>值得一提的是你可以在文件末尾处找到一个theme:的配置<br>这里面用于设置你的主题</p>
<p>source的新建教程</p>
<p>除了在_posts里面写文章外（文章可以用md开发）<br>你还可以在里面新建tags（标签），about（网站介绍）<br>categories（分类），img（网站文件）等文件夹<br><img src="/img/hexo%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B/%E5%9B%BE%E7%89%871.png"><br>然后创建index.md的文件<br><img src="/img/hexo%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B/%E5%9B%BE%E7%89%872.png"><br>index.md文件参考<br>title是新建的文件夹的名称<br>date:是日期<br><img src="/img/hexo%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B/%E5%9B%BE%E7%89%873.png"></p>
<p>文章编写以及主题修改请看下篇<br>关于如何部署到github请看如何提交项目到github也不在此处</p>
<a href="/2023/11/08/github%E5%85%A5%E9%97%A8%E5%88%B0%E5%85%A5%E5%9C%9F/" title="github入门到入土">github入门到入土</a>
<p><a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/">官方教程</a></p>

    </div>
    
    
    
    
    
    
    
</div>

            <footer id="footer">
    <div id="footer-wrap">
        <div>
            &copy;
            2020 - 2023 Binging
            <span id="footer-icon">
                <i class="fa-solid fa-font-awesome fa-fw"></i>
            </span>
            &commat;HiW
        </div>
        <div>
            Based on the <a target="_blank" rel="noopener" href="https://hexo.io">Hexo </a> &amp;
            <a target="_blank" rel="noopener" href="https://gitee.com/KSweb/bng-blog-open-source-code">binging hexo</a>
        </div>
        
    </div>
</footer>

        </div>
        
        <transition name="fade">
            <div id="preview" ref="preview" v-show="previewShow">
                <img id="preview-content" ref="previewContent" />
            </div>
        </transition>
        
    </div>
    <script src="/js/main.js"></script>
    
    




    
</body>
</html>
